<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>达达订货--种子用户申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="keywords" content="">
    <meta name="description" content="达达订货--种子用户申请">
     <script>
         (function(b,a){var c={};(function(){var j=a.querySelector('meta[name="viewport"]'),n=a.querySelector('meta[name="hotcss"]'),h=b.devicePixelRatio||1,i=540,m=0;h=h>=3?3:(h>=2?2:1);if(n){var f=n.getAttribute("content");if(f){var l=f.match(/initial\-dpr=([\d\.]+)/);if(l){h=parseFloat(l[1])}var k=f.match(/max\-width=([\d\.]+)/);if(k){i=parseFloat(k[1])}var d=f.match(/design\-width=([\d\.]+)/);if(d){m=parseFloat(d[1])}}}a.documentElement.setAttribute("data-dpr",h);c.dpr=h;a.documentElement.setAttribute("max-width",i);c.maxWidth=i;if(m){a.documentElement.setAttribute("design-width",m)}c.designWidth=m;var e=1/h,g="width=device-width, initial-scale="+e+", minimum-scale="+e+", maximum-scale="+e+", user-scalable=no";if(j){j.setAttribute("content",g)}else{j=a.createElement("meta");j.setAttribute("name","viewport");j.setAttribute("content",g);a.head.appendChild(j)}})();c.px2rem=function(e,d){if(!d){d=parseInt(c.designWidth,10)}return parseInt(e,10)*320/d/20};c.rem2px=function(e,d){if(!d){d=parseInt(c.designWidth,10)}return e*20*d/320};c.mresize=function(){var d=a.documentElement.getBoundingClientRect().width||b.innerWidth;if(c.maxWidth&&(d/c.dpr>c.maxWidth)){d=c.maxWidth*c.dpr}if(!d){return false}a.documentElement.style.fontSize=(d*20/320)+"px";c.callback&&c.callback()};c.mresize();b.addEventListener("resize",function(){clearTimeout(c.tid);c.tid=setTimeout(c.mresize,33)},false);b.addEventListener("load",c.mresize,false);setTimeout(function(){c.mresize()},333);b.hotcss=c})(window,document);
     </script>    
     <link rel="stylesheet" href="//at.alicdn.com/t/font_c2xvt19xic6jemi.css">
    <link rel="stylesheet" href="${ctx }/css/seed/seed.css">
</head>
<body>
<div class="top">
   <img class="bg" src="${ctx }/img/seed/top-bg.png">
   <img class="logo" src="${ctx }/img/seed/logo.png">
    <ul class="tags">
        <li>
            <span data-idx="1"  class="tag-index">1</span>
            <span class="tag-text">总部免费设计方案</span>
        </li>
        <li>
            <span class="tag-index">2</span>
            <span class="tag-text">总部福利时时享</span>
        </li>
        <li>
            <span class="tag-index">3</span>
            <span class="tag-text">产品工厂成本价供应</span>
        </li>
        <li>
            <span class="tag-index">4</span>
            <span class="tag-text">邀请好友返红包提出建议送好礼</span>
        </li>
    </ul>
</div>
<div class="middle">
    <form id="form1" method="post" action="${ctx }/seed/save" onsubmit="test">
    <div class="inner-box">
        <h2 class="form-title">报名信息</h2>
        <div class="form-controller">
            <label>姓名<input type="text" name="realName" id="realName"></label>
        </div>
        <div class="form-controller">
            <label>手机号<input type="tel" name="mobile" id="mobile"></label>
        </div>
        <div class="form-controller">
            <div class="label">所在城市
                <select id="province" name="province.id">
                    <c:forEach items="${provinces }" var="province">
                    	<option value="${province.id }">${province.name }</option>
                    </c:forEach>
                </select>
                <select  id="city" name="city.id">
                	<c:forEach items="${cts }" var="ct">
                		<option value="${ct.id }">${ct.name }</option>
                	</c:forEach>
                </select>
                <select id="district" name="district.id">
                	<c:forEach items="${districts }" var="district">
                		<option value="${district.id }">${district.name }</option>
                	</c:forEach>
                </select>
            </div>
        </div>
        <div class="form-controller">
            <label>小区<input type="text" name="communityName" id="communityName"></label>
        </div>
        <div class="form-controller">
            <label>户型<input type="text" name="houseType" id="houseType"></label>
        </div>
        <div class="form-controller">
            <label>面积<input type="text" name="area" id="area"></label>
        </div>
        <div class="form-controller submit-btns">
            <button type="button" class="submit" onclick="test()">报名</button>
        </div>
        <div class="form-controller argument">
            <label class="radio-elem"><input name="wuliu" id="agreement" type="checkbox"><i class="radio-icon iconfont icon-iconfontgouxuan"></i>我已阅读并同意</label>
            <a target="_blank" href="${ctx }/seed/agreement">&lt;&lt;种子用户合伙人协议&gt;&gt;</a>
        </div>
    </div>
    </form>
</div>
<div class="bottom">
   <h2 class="title"><span class="line-l"></span>操作流程<span class="line-r"></span></h2>
    <ul class="tags">
        <li class="tag">
            <span>报名</span>
            <span>填资料</span>
        </li>
        <li class="splider"><i class="iconfont icon-xiangyoujiantou"></i></li>
        <li class="tag">
             <span>量房</span>
             <span>设计</span>
        </li>
        <li class="splider"><i class="iconfont icon-xiangyoujiantou"></i></li>
        <li class="tag">
            <span>运营商</span>
             <span>审核</span>
        </li>
        <li class="splider"><i class="iconfont icon-xiangyoujiantou"></i></li>
        <li class="tag">
            <span>成为种</span>
            <span>子用户</span>
        </li>
    </ul>
    <div class="blank"></div>
    <div class="banner">
        为什么要成为种子用户?
    </div>
    <div class="text-infos">
       <div class="text-info">
           <h2 class="text-index-1">精选优秀设计师专属服务</h2>
           <p>以最严苛的规格，来打造<span>您的明星样板间</span></p>
       </div>
        <div class="text-info">
            <h2 class="text-index-2">软装类无限返利</h2>
            <p>为APP推荐客户并签约成功即<span>返利</span></p>
            <p>样板间预约客户参观后签约成功<span>返利</span></p>
        </div>
        <div class="text-info">
            <h2 class="text-index-3">红包返现</h2>
            <p>种子用户完成“<span>2</span>”里的任何一项后，被推荐人 付款之后，推荐人即可获得返利红包。</p>
        </div>
    </div>
</div>
<div class="renwu">
<img src="${ctx }/img/seed/renwu.png">    
</div>
<div class="foot">
    <div class="inner-box">
        <div class="title">已开通<span>33</span>座城市</div>
        <p>已开通城市:</p>
        <div class="citys">
            <span>东莞</span>
           <c:forEach items="${citys }" var="city">
           	<span>${city.name }</span>
           </c:forEach>
        </div>
        <img class="qrcode" src="${ctx }/img/seed/qrcode.png">
        <p>扫码下载软装到家APP</p>
    </div>
</div>
<script type="text/javascript" src="${ctx }/js/lib.js"></script>
<script type="text/javascript">


$(document).ready(function(){ 
	$('#province').change(function(){ 
		var provinceId = jQuery("#province").find("option:selected").val();
		var url ="${ctx}/m/city/list?pageSize=10000&province.id=" + provinceId;
		jQuery.ajax({
			datatype:"json",
			type:"get",
			url:url,
			success:function(resp){
				var str = JSON.stringify(resp)
				var obj = jQuery.parseJSON(str)
				var cityInfos = obj.data.cityInfos
				var opt = "";
				for (var i =0; i < cityInfos.length; i++) {
					//alert(cityInfos[i].name);
					
					opt += "<option value='" + cityInfos[i].id + "'>" + cityInfos[i].name + "</option>";
				}
				jQuery("#city").html(opt);
				
				var cityId = jQuery("#city").find("option:selected").val();
				var url ="${ctx}/m/district/list?pageSize=10000&city.id=" + cityId;
				jQuery.ajax({
					datatype:"json",
					type:"get",
					url:url,
					success:function(resp){
						var str = JSON.stringify(resp)
						var obj = jQuery.parseJSON(str)
						var districtInfos = obj.data.districtInfos
						var opt = "";
						for (var i =0; i < districtInfos.length; i++) {
							//alert(cityInfos[i].name);
							
							opt += "<option value='" + districtInfos[i].id + "'>" + districtInfos[i].name + "</option>";
						}
						
						jQuery("#district").html(opt);
					}
				});
			}
		});
		

	}) ;
	
	$('#city').change(function(){ 
		var cityId = jQuery("#city").find("option:selected").val();
		var url ="${ctx}/m/district/list?pageSize=10000&city.id=" + cityId;
		jQuery.ajax({
			datatype:"json",
			type:"get",
			url:url,
			success:function(resp){
				var str = JSON.stringify(resp)
				var obj = jQuery.parseJSON(str)
				var districtInfos = obj.data.districtInfos
				var opt = "";
				for (var i =0; i < districtInfos.length; i++) {
					//alert(cityInfos[i].name);
					
					opt += "<option value='" + districtInfos[i].id + "'>" + districtInfos[i].name + "</option>";
				}
				jQuery("#district").html(opt);
			}
		});
	}) ;
}) ;
	
	
function test() {
	var mobile = jQuery("#mobile").val();
	if (mobile == "" || mobile == undefined || mobile == null) {
		alert("手机号码不能为空！");
		return ;
	}
	
	var realName = jQuery("#realName").val();
	if (realName == "" || realName == undefined || realName == null) {
		alert("姓名不能为空！");
		return ;
	}
	
	 if ($("#agreement").is(":checked")) {

	 } else {
		 alert("请阅读并同意协议!")
		 return;
	 }
	
	
	var data = jQuery("#form1").serialize()
	jQuery.ajax({
		data: data,
		datatype:"json",
		type:"post",
		url:"${ctx}/seed/save",
		success:function(resp){
			var str = JSON.stringify(resp)
			var obj = jQuery.parseJSON(str)
			if (obj.seccuess) {
				alert(obj.message);
			};
		}
	});
	return false;
}

function cityOnChange(){
	var provinceId = jQuery("#province").find("option:selected").val();
	var url ="${ctx}/m/city/list?province.id=" + provinceId;
	jQuery.ajax({
		datatype:"json",
		type:"get",
		url:url,
		success:function(resp){
			var str = JSON.stringify(resp)
			var obj = jQuery.parseJSON(str)
			var cityInfos = obj.data.cityInfos
			var opt = "";
			for (var i =0; i < cityInfos.length; i++) {
				//alert(cityInfos[i].name);
				
				opt += "<option value='" + cityInfos[i].id + "'>" + cityInfos[i].name + "</option>";
			}
			jQuery("#city").html(opt);
		}
	});
}

function provinceOnChange() {
	
}

function districtOnChange(){
	var cityId = jQuery("#city").find("option:selected").val();
	alert(cityId);
	if (cityId == "") {
		alert("cityId is null.");
	}
}

</script>
</body>
</html>

